<template>
  <div id="CSMap" style="width:1024px;height:460px;"></div>
</template>
<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator'
import changsha from '@/assets/changsha.json'
import echarts from 'echarts'

@Component({
  name: 'MapChart'
})
export default class MapChart extends Vue {
  @Prop({ default: [] }) list!: any[]
  changshaMap = changsha
  mapData: { [key: string]: string | number | Object }[] = [
    {
      name: '芙蓉区',
      value: 97,
      done: 93,
      rate: '98.12%'
    },
    {
      name: '天心区',
      value: 122,
      done: 127,
      rate: '96.53%'
    },
    {
      name: '岳麓区',
      value: 522,
      done: 374,
      rate: '98.45%'
    },
    {
      name: '开福区',
      value: 178,
      done: 187,
      rate: '93.43%'
    },
    {
      name: '雨花区',
      value: 194,
      done: 0,
      rate: '99.23%'
    },
    {
      name: '长沙县',
      value: 239,
      done: 194,
      rate: '98.52%'
    },
    {
      name: '望城区',
      value: 164,
      done: 149,
      rate: '96.21%'
    },
    {
      name: '浏阳市',
      value: 247,
      done: 181,
      rate: '95.92%'
    },
    {
      name: '宁乡市',
      value: 95,
      done: 85,
      rate: '98.39%'
    }
  ]

  mounted() {
    this.initChart()
  }
  initChart() {
    const mapChart = echarts.init(document.querySelector('#CSMap'))
    echarts.registerMap('changsha', this.changshaMap)
    mapChart.setOption({
      tooltip: {
        tirgger: 'item',
        position: 'inside',
        backgroundColor: 'rgba(7, 23, 52, 0.85)',
        formatter: (params: any) => {
          const str = `<div style="padding:10px 14px;">
                        <div style="font-family:PingFang Medium;">
                          ${(params.data && params.data.name) || ''}
                        </div>
                        <div style="margin:6px 0;height:1px;background:rgba(255,255,255,0.1);"></div>
                        <div>受 理 量：${(params.data && params.data.value) || 0}件</div>
                        <div>办 结 量：${(params.data && params.data.done) || 0}件</div>
                        <div>正 点 率：${(params.data && params.data.rate) || '0%'}</div>
                      </div>`
          return str
        }
      },
      series: [
        {
          name: '长沙市',
          type: 'map',
          mapType: 'changsha',
          zoom: 1.25,
          roam: 'scale',
          data: this.list,
          itemStyle: {
            normal: {
              areaColor: '#0371c5',
              borderColor: '#fff',
              borderWidth: 2, //设置外层边框
              shadowBlur: 3,
              shadowOffsetY: 0,
              shadowOffsetX: 0,
              label: {
                show: true,
                color: '#fff'
              }
            },
            emphasis: {
              areaColor: '#e29d50',
              borderColor: '#fff',
              borderWidth: 2, //设置外层边框
              shadowBlur: 3,
              shadowOffsetY: 0,
              shadowOffsetX: 0,
              label: {
                show: true,
                color: '#fff'
              }
            }
          }
        }
      ]
    })
    setTimeout(() => {
      mapChart.dispatchAction({
        type: 'showTip',
        seriesIndex: 0,
        dataIndex: 2
      })
    }, 300)
  }
}
</script>
<style scoped lang="scss">
@import '~@/styles/cockpit.scss';
#CSMap {
  width: 1024px;
  height: 460px;
  .tool-card {
    padding: 12px 16px;
    border-radius: 4px;
    background: rgba(7, 23, 52, 0.85);
    filter: drop-shadow(0 3px 6px rgba(0, 8, 25, 0.16));
    color: #fff;
    .card-title {
      font-family: PingFang Medium;
      font-size: 16px;
      border-bottom: 1px solid rgba(0,0,0, 0.1);
    }
  }
}
</style>
